<template>
    <div>
        <h2>房型列表</h2>
        <div>
            <span>房型名称:</span>
            <input type="text" v-model="type.HouseTypeName">
            <span>面积:</span>
            <input type="text" v-model="type.Num1">-<input type="text" v-model="type.Num2">
            <input type="button" class="btn btn-success" value="查询" @click="ok">
        </div>
        <table class="table  table-bordered">

            <tbody>
                <tr class="bg-primary">
                    <td>房型名称</td>
                    <td>价格</td>
                    <td>面积</td>
                    <td>房型介绍</td>
                    <td>图片</td>
                </tr>


                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.HouseTypeName }}</td>
                    <td> <span style="color:red">￥</span>{{ item.Price }}</td>
                    <td>{{ item.Num }}平方米</td>
                    <td>{{ item.JieShao }}</td>
                    <td> <img :src="item.Photo" width="60" height="60"></td>
                </tr>


            </tbody>


        </table>
        <span>总条数:{{ data.count }}条</span>
        <span>每页数:{{ type.size }}条</span>
        <span>当前页:{{ type.index + '/' + data.page }}页</span>
    </div>
    <div>
        <input type="button" class="btn btn-primary" value="首页" @click="getpage('a')">
        <input type="button" class="btn btn-primary" value="上一页" @click="getpage('b')">
        <input type="button" class="btn btn-primary" value="下一页" @click="getpage('c')">
        <input type="button" class="btn btn-primary" value="尾页" @click="getpage('d')">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();


///显示房型
let type = reactive({

    HouseTypeName: '',
    Num1: '',
    Num2: '',
    index: 1,
    size: 2,
})


let data: any = reactive({
    list: [],
    count: 0,
    page: 0,

})
//显示房型
onMounted(() => {
    ok();
})



//显示房型
const ok = () => {

    axios({

        url: 'https://localhost:7259/api/HouseType/HouseTypeList',
        method: 'get',
        params: type,
    })

        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;
        })


        .catch((ree) => {
            console.log(ree);
        })

}



//分页
const getpage = (str: any) => {

    switch (str) {

        case 'a':
            if (type.index == 1) {
                return;
            }
            type.index = 1;
            break;


        case 'b':
            if (type.index == 1) {
                return;
            }
            type.index--;
            break;




        case 'c':
            if (type.index == data.page) {
                return;
            }
            type.index++;
            break;




        case 'd':
            if (type.index == data.page) {
                return;
            }
            type.index = data.page
            break;


    }

    ok();
}















</script>

<style scoped>
span {
    margin: 5px;
}

input {
    margin: 5px;
}
</style>
